import { computed } from 'vue';
import { useThemeStore } from '../stores/theme';
import { type ThemeOptions } from '../types/editor';

export function useTheme() {
  const themeStore = useThemeStore();

  const currentTheme = computed(() => themeStore.currentTheme);
  const themeConfig = computed(() => themeStore.currentThemeConfig);
  const themeList = computed(() => themeStore.themeList);

  const setTheme = (themeName: string) => {
    themeStore.setTheme(themeName);
  };

  const registerTheme = (theme: ThemeOptions) => {
    themeStore.registerTheme(theme);
  };

  const toggleTheme = () => {
    themeStore.toggleTheme();
  };

  const getThemeStyles = () => {
    return themeConfig.value.styles;
  };

  const getCssVars = () => {
    const styles = themeConfig.value.styles;
    const cssVars: Record<string, string> = {};
    
    Object.entries(styles).forEach(([key, value]) => {
      cssVars[`--md-${key}`] = value;
    });
    
    return cssVars;
  };

  return {
    currentTheme,
    themeConfig,
    themeList,
    setTheme,
    registerTheme,
    toggleTheme,
    getThemeStyles,
    getCssVars
  };
}